<template>

  <el-select v-model="community" placeholder="请选择">
    <el-option-group
      v-for="group in communityData.nodes"
      :key="group.deptId"
      :label="group.deptName">
      <el-option
        v-for="item in group.nodes"
        :key="item.deptId"
        :label="item.deptName"
        :value="item.deptId">
      </el-option>
    </el-option-group>
  </el-select>

</template>
<script>
export default {
  name: 'communitySelect',
  data () {
    return {
      communityData: [],
      community: '',
      deptMap: null
    }
  },
  watch: {
    community (val) {
      if (this.deptMap) {
        let o = this.deptMap.get(val)
        this.$emit('onCommunityChange', o)
      }
    }
  },
  methods: {
    getList () {
      let url = this.$base.getUrl('getTree')
      let params = {
        url: url,
        data: {
          'maxLevel': 2
        }
      }
      this.$store.dispatch('getForm', params).then((res) => {
        this.communityData = res
        this.deptMap = new Map()
        // 二层循环生成用于展示的map结构
        res.nodes.forEach((element, index) => {
          this.deptMap.set(element.deptId, element)
          if (element.nodes) {
            let child = element.nodes
            child.forEach((c, i) => {
              this.deptMap.set(c.deptId, c)
              if (index === 0 && i === 0) {
                this.community = c.deptId
                // let o = this.deptMap.get(c.deptId)
                // this.$emit('onCommunityChange', o)
              }
            })
          }
        })
      })
    }
  },
  mounted () {
    this.getList()
  }

}
</script>
<style lang="less" scoped>
/deep/ .el-select-group__title{
  color: rgb(150, 165, 189);
  font-weight: bold;
}
/deep/ .el-select-dropdown__item {
  color: rgb(200, 200, 200);
}
.el-select-group__wrap::after{
  background: #51596d!important;
}
</style>
